<template>
    <div class="container">
        <div >
            <div class="cover 111"></div>
            <div class="box">
                <div class="school-wrapper">
                    <div class="school__left">
                        <img
                            src="https://api.lxbird.com/image/school/au_macau.png"
                            alt="schoolLogo"
                            class="school__logo"
                        >
                        <div class="school__name">
                            <div class="cn-name">澳门大学</div>
                            <div class="en-name">UNIVERSITY OF MACAU</div>
                        </div>
                    </div>
                    <img
                        src="/static/icons/school_arrow.svg"
                        alt="arrow"
                        class="school__arrow"
                    >
                </div>
                <div class="name">
                    <h3>中国语言文学</h3>
                    <div class="theme-color">Bachelor of Arts in Chinese Language and Literature</div>
                </div>
                <div class="info"><span class="item"><i class="icon font_family icon-course"></i><span> 学院：人文学院</span></span>
                </div>
            </div>
            <div class="box">
                <article>
                    <h3>专业介绍</h3>
                    <p>通过对汉语和中国文学的系统学习，培养学生欣赏，分析和写作的能力;通过接触中国语言学，中国文学和中国文化，让学生了解人文学科的基本价值，帮助他们理解基本的人类信仰，探索它们在地方和国际社交中的表现方式;帮助学生掌握和欣赏语言和文化多样性，并在全球化背景下反思自己的身份，并对生活采取乐观的态度</p>
                </article>
                <article class="course__require">
                    <h3>专业介绍</h3>
                    <div class="course__require__content">
                        <div class="item">
                            <div class="item__tag">学制</div>
                            <div class="item__text">4年</div>
                        </div>
                        <div class="item">
                            <div class="item__tag">学费</div>
                            <div class="item__text">学费为澳门币74,400元/年</div>
                        </div>
                        <div class="item">
                            <div class="item__tag">申请费用</div>
                            <div class="item__text">300澳门币</div>
                        </div>
                        <div class="item">
                            <div class="item__tag">申请要求</div>
                            <div class="item__text">必须具有高中毕业或相当于高中毕业的文化程度，并须参加各省市组织的全国高等学校统一招生考试，高考成绩达到该省市本科第一批录取分数线以上，择优录取，高考英语科成绩须达110分或以上</div>
                        </div>
                    </div>
                </article>
            </div>
            <div class=" box">
                <h3>专业课程</h3>
                <div class="item">
                    <div class="title">1.</div>
                    <div class="text">
                        <div class="cn">现代汉语</div>
                        <div class="en">Modern Chinese</div>
                    </div>
                </div>
                <div class="item">
                    <div class="title">2.</div>
                    <div class="text">
                        <div class="cn">中国现代文学</div>
                        <div class="en">Chinese Modern Literature</div>
                    </div>
                </div>
                <div class="item">
                    <div class="title">3.</div>
                    <div class="text">
                        <div class="cn">汉语语言学概论</div>
                        <div class="en">Introduction to Chinese Linguistics</div>
                    </div>
                </div>
                <div class="item">
                    <div class="title">4.</div>
                    <div class="text">
                        <div class="cn">中国当代文学</div>
                        <div class="en">Chinese Contemporary Literature</div>
                    </div>
                </div>
                <div class="item">
                    <div class="title">5.</div>
                    <div class="text">
                        <div class="cn">通识教育科目</div>
                        <div class="en">General Education Subjects</div>
                    </div>
                </div>
                <div class="item">
                    <div class="title">6.</div>
                    <div class="text">
                        <div class="cn">粤语与粤文化</div>
                        <div class="en">Cantonese and Cantonese Culture</div>
                    </div>
                </div>
                <div class="item">
                    <div class="title">7.</div>
                    <div class="text">
                        <div class="cn">中国历史文献选读</div>
                        <div class="en">Chinese Historical Literature Selected</div>
                    </div>
                </div>
                <div class="item">
                    <div class="title">8.</div>
                    <div class="text">
                        <div class="cn">中国古典诗歌</div>
                        <div class="en">Chinese Classical Poetry</div>
                    </div>
                </div>
                <div class="item">
                    <div class="title">9.</div>
                    <div class="text">
                        <div class="cn">中国古典小说</div>
                        <div class="en">Chinese Classical Novels</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "MajorIntroduce",
};
</script>

<style lang="less">
.container {
    
  .cover {
    background-image: url("https://api.lxbird.com/image/banner/au_macau.jpg");
    width: 100%;
    height: 5.7rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .box {
    margin: -1.6rem 0.35rem 0px;
    padding: 0.95rem 0.5rem;
    background: rgb(255, 255, 255);
  }
  .school-wrapper {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-bottom: 0.8rem;
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgb(228, 228, 228);
  }
  .school__left {
    display: flex;
  }
  .school__logo {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
  }
  .school__name {
    padding-left: 0.8rem;
  }
  .school__name .cn-name {
    color: rgb(42, 65, 84);
    font-size: 0.6rem;
    padding-bottom: 0.15rem;
  }
  .school__name .en-name {
    color: rgb(152, 152, 152);
    font-size: 0.5rem;
  }
  .school__arrow {
    width: 0.3rem;
    height: 0.55rem;
    display: block;
  }
  .name {
    margin-left: 0.5rem;
    font-size: 0.5rem;
  }
  .name h3 {
    font-size: 0.9rem;
    color: rgb(39, 43, 49);
    margin-bottom: 0.15rem;
  }
  .theme-color {
    color: #00a4ff !important;
  }
  .info {
    color: rgb(152, 152, 152);
    font-size: 0.5rem;
  }
  .item {
    display: inline-block;
    margin: 0.5rem;
  }
  article {
    padding: 0px 0.375rem;
  }
  h3 {
    color: rgb(42, 65, 84);
    font-size: 0.7rem;
    padding: 1.425rem 0px 0.6rem;
    border-bottom: 1px solid rgb(239, 239, 239);
  }
  article p {
    margin-bottom: 0px;
    margin-top: 0.925rem;
    line-height: 0.85rem;
  }
  .course__require {
    padding: 0px 0.375rem;
  }
  .course__require__content {
    margin: 0.8rem 0px 0.975rem;
  }
  .course__require__content .item:not(:last-child) {
    margin-bottom: 0.8rem;
  }
  .course__require__content .item {
    overflow: hidden;
    line-height: 0.7rem;
  }
  .course__require__content .item__tag {
    border-radius: 0.35rem;
    background-color: rgb(30, 137, 255);
    font-size: 0.5rem;
    width: 2.45rem;
    height: 0.7rem;
    text-align: center;
    color: white;
    float: left;
  }
  .course__require__content .item__text {
    min-width: 2rem;
    margin-left: 2.825rem;
    font-size: 0.6rem;
  }
  .box {
    padding: 0px 0.75rem 1.85rem;
    font-size: 0.6rem;
  }
  .item {
    padding: 0px 0.75rem;
    background: rgb(247, 251, 255);
    font-size: 0.6rem;
    color: rgb(101, 107, 113);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
  }
  .item .title {
    font-size: 1.45rem;
    color: rgb(180, 191, 202);
    text-align: center;
    font-weight: 100;
    padding: 0.75rem 0px;
    flex-shrink: 0;
    width: 2rem;
  }
  .item .text .cn {
    font-size: 0.6rem;
  }
  .item .text .en {
    font-size: 0.5rem;
  }
}
</style>